<template>
	<view class="item" @click="jumpDetails">
		<!-- {{item}} -->
		<view class="top">
			<view class="number" @click.native.stop="copy(item.order_no)">订单号：{{ item.order_no }}</view>
			<view class="status" v-if="item.order_state == 3">已取消</view>
			<view class="status" v-else-if="item.order_state == 2">已完成</view>
			<view class="status" v-else-if="item.pay_state == 0 || item.last_pay_state == 0">{{item.pay_state==1?'首款已支付':'待付款'}}</view>
			<view class="status" v-else-if="item.order_state == 1 && item.allot_state == 1">进行中</view>
			
			
		</view>
		<u-divider lineColor="#F8F9FA"></u-divider>
		<view class="middle">
			<view class="title">{{ item.pro_name }}</view>
			<view class="content">
				<view class="left">
					<view class="images">
						<image style="width: 100rpx; height: auto" mode="widthFix" src="/static/house.jpg" @error="imageError"></image>
						<!-- <u--image src="/static/house.jpg" width="100rpx" height="100rpx"  mode="widthFix"></u--image> -->
					</view>
					<view class="desc">{{ item.service_items }}</view>
				</view>
				<view class="right">
					<view class="text">{{ item.service_lv }}</view>
					<view class="text" :class="{ active: item.pay_state == 1 }">
						<!-- 支付金额 -->
						<span class="status">（阶段一）</span>
						<span class="price">￥{{ item.first_fee }}</span>
					</view>
					<view class="text" :class="{ active: item.last_pay_state == 1 }">
						<!-- 支付金额 -->
						<span class="status">（阶段二）</span>
						<span class="price">￥{{ item.last_fee }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="date">{{ item.create_time }}</view>
			<view class="btn">
				<u-button shape="circle" 
				@click.native.stop="cancelOrder(item)" 
				text="取消订单" size="mini" 
				v-if="cancelOrderBtn(item)">
				</u-button>
				<u-button
					type="primary"
					@click.native.stop="payOrder(item)"
					shape="circle"
					text="去支付"
					color="#21B579"
					size="mini"
					v-if="payOrderBtn(item)"
				></u-button>
				<u-button 
				shape="circle" 
				@click.native.stop="jumpLog(item)" text="装修日志" 
				size="mini" 
				:color="!item.v_state?'#333':item.v_state===2?'#f50':'#21B579'"
				v-if="logOrderBtn(item)">
				</u-button>
				<!-- <u-button shape="circle" @click.native.stop="jumpLog" text="装修日志" size="mini" ></u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
import { wxPay } from '../../../utils/public';
import {cancelOrderBtn,payOrderBtn,logOrderBtn} from '../../../utils/orderStatus.js'
export default {
	props: {
		item: {
			type: Object,
			default: {}
		},
		userId: {
			type: Number
		}
	},
	computed:{
		
	},
	data() {
		return {
			// userInfo: {}
			// disabled: true,
			// customStyle: {
			// 	marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			// 	color: 'red',
			// }
		};
	},

	methods: {
		// 取消订单

		cancelOrder(item) {
			let that = this;
			console.log(that.userId);
			uni.showModal({
				title: '提示',
				content: '你确定取消这个订单吗？',
				success: function (res) {
					if (res.confirm) {
						that.$api.post('/fit/cancelOrder', { outTradeNo: item.order_no, userId: that.userId }).then((res) => {});
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 支付订单
		payOrder(obj) {
			console.log(obj);
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
					let data = {
						openid: res.data.openid,
						ownership: 'last',
						source: 'pro_order',
						userId: res.data.id,
						outTradeNo: obj.order_no
					};
					that.$api.post('/fit/payment', data).then((response) => {
						console.log(response, 'response');

						wxPay(response.data, { outTradeNo: obj.order_no, ownership: '第二阶段', price: obj.last_fee });
					});
					console.log(data);
				}
			});
		},
		jumpDetails() {
			uni.navigateTo({
				url: `/pages/orderDetails/orderDetails?id=${this.item.order_no}`
			});
		},
		jumpLog(item) {
			if(item.v_state){
				uni.navigateTo({
					url: `/pages/serviceDiary/serviceDiary?id=${this.item.order_no}`
				});
			}else{
				uni.showToast({
					title:'暂无装修日志',
					icon:"none"
				})
			}
			
		},
		copy(order_no) {
			uni.setClipboardData({
				data: order_no,
				success: function () {
					console.log('success');
					uni.showToast({
						icon: 'none',
						title: `复制成功`
					});
				}
			});
		},
		//取消订单按钮判断
		cancelOrderBtn(item){
			return cancelOrderBtn(item)
		},
		//支付按钮按钮判断
		payOrderBtn(item){
			return payOrderBtn(item)
		},
		//装修日志按钮判断
		logOrderBtn(item){
			return logOrderBtn(item)
		},
		
		// 获取用户信息数据
		// getUserInfo() {
		// 	let that = this;
		// 	uni.getStorage({
		// 		key: 'userInfo',
		// 		success(res) {
		// 			that.userInfo = res.data;
		// 		}
		// 	});
		// }
	}
};
</script>

<style scoped lang="scss">
@import './item.scss';
</style>
